<template>
	<view>
		<cu-custom :isBack="true" bgColor="bgColor">
			<block slot="content">生产概要/统计数据</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<view class="padding-t">
			<view class="u-main" v-show="false">
				<view class="u-main-title">
					R1DW合格率
				</view>
				<view class="u-main-line"></view>
				<view class="u-main-info">
					<view class="u-flex">
						<view style="width: 50%;">
							<view class="team-info">
								<view class="day-charts">
									<u-charts 
									 class="day-charts"
									 :canvas-id="dayData.id" 
									 :chartType="dayData.chartType"
									 :cWidth="dayData.cWidth" 
									 :cHeight="dayData.cHeight" 
									 :opts="dayData.opts"
									 :ref="dayData.id" />
								</view>
								<view>
									<view class="team-info-title u-font-weight">00.00%</view>
									<view class="u-font-weight6">甲班统计</view>
								</view>
							</view>
							<view class="team-info">
								<view class="day-charts">
									<u-charts 
									 class="day-charts"
									 :canvas-id="dayData.id" 
									 :chartType="dayData.chartType"
									 :cWidth="dayData.cWidth" 
									 :cHeight="dayData.cHeight" 
									 :opts="dayData.opts"
									 :ref="dayData.id" />
								</view>
								<view>
									<view class="team-info-title u-font-weight">00.00%</view>
									<view class="u-font-weight6">甲班统计</view>
								</view>
							</view>
						</view>
						<view style="width: 50%;">
							<view class="team-info">
								<view class="day-charts">
									<u-charts 
									 class="day-charts"
									 :canvas-id="dayData.id" 
									 :chartType="dayData.chartType"
									 :cWidth="dayData.cWidth" 
									 :cHeight="dayData.cHeight" 
									 :opts="dayData.opts"
									 :ref="dayData.id" />
								</view>
								<view>
									<view class="team-info-title u-font-weight">00.00%</view>
									<view class="u-font-weight6">甲班统计</view>
								</view>
							</view>
							<view class="team-info">
								<view class="day-charts">
									<u-charts 
									 class="day-charts"
									 :canvas-id="dayData.id" 
									 :chartType="dayData.chartType"
									 :cWidth="dayData.cWidth" 
									 :cHeight="dayData.cHeight" 
									 :opts="dayData.opts"
									 :ref="dayData.id" />
								</view>
								<view>
									<view class="team-info-title u-font-weight">00.00%</view>
									<view class="u-font-weight6">甲班统计</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 月累计轧线产量 -->
			<view class="u-main">
				<view class="u-main-title">
					月累计轧线产量
				</view>
				<view class="u-main-line"></view>
				<view class="u-main-info">
					<view class="mass-echarts">
						<u-charts
						 :show="monterPrarm1.show"
						 :legend="monterPrarm1.legend"
						 :canvas-id="monterPrarm1.id" 
						 :chartType="monterPrarm1.chartType" 
						 :cWidth="monterPrarm1.radarWidth" 
						 :cHeight="monterPrarm1.radarHeight" 
						 :opts="monterPrarm1.opts"
						 :xAxis="monterPrarm1.xAxis"
						 ref="bcdd" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_TEAM_MONTH_COUNT} from '@/common/api/prodSum.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				monterPrarm1: {
					show: true,
					radarWidth: uni.upx2px(690),
					radarHeight: uni.upx2px(420),
					legend: {
						data: ['月产量(t)'],
						position: 'top',
						float: 'right',
						fontColor: 'rgba(0,0,0,0.60)'
					},
					chartType: "column",
					extraType: "",
					id: "massWidth",
					xAxis: {
						disabled: false,
						disableGrid: false
					},
					yAxis: {
						disabled: false,
						disableGrid: false
					},
					opts: {
						categories: ['甲', '乙', '丙', '丁'],
						series: [{
							name: '月产量(t)',
							data: [0, 0, 0, 0]
						}]
					}
				},
				dayData: {
					opts: {
						series: [{
							name : "未完成率",
							data: 0,
							color: '#d9d9d9'
						},
						{
							name : "完成率",
							data: 0,
							color: '#3088f4'
						}]
					},
					cWidth: uni.upx2px(110),
					cHeight: uni.upx2px(110),
					chartType: "ring",
					extraType: "",
					id: "datInfo"
				}, // 每日产量的echarts配置
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods:{
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo() {
				let res = await post(GET_TEAM_MONTH_COUNT)
				if ( res.code == 0 ) {
					var newArr = res.data.yieldList.map(item => {
						return Number(item / 1000).toFixed(0)
					})
					let data = {
						categories: res.data.groupList,
						series: [
							{
								name: '月产量(t)',
								data: newArr
							}
						]
					}
					this.monterPrarm1.opts = data
					// this.$refs.bcdd.changeData('massWidth',data)
					// this.monterPrarm1.opts.categories = res.data.groupList
					// this.monterPrarm1.opts.series[0].data = newArr
				}
			}
		}
	}
</script>

<style>
	.mass-echarts {
		width: 690upx;
		height: 420upx;
	}
	.team-info {
		display: flex;
		padding-left: 20upx;
	}
	.day-charts {
		width: 110upx;
		height: 110upx;
	}
	.team-info-title {
		height: 56upx;
		font-size: 40upx;
	}
</style>
